<template>
  <!-- 登录 zj -->
  <div>
    <!-- 空div用于撑页面 -->
    <div class="content"></div>
    <div class="logo">
      <img src="static/img/image49.png" class="logo-img" />
      <p class="logo-fond">AUEDIAN</p>
    </div>
    <div class="register">
      <van-form validate-first @submit="onSubmit">
        <div :class="{ 'phone': active, 'phone1': isActive }" >
          <select class="selects" v-model="values">
            <option
              v-for="(item, index) in options"
              :key="index"
              v-bind:value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
          <van-field
            v-model="phone"
            @focus="focus"
            name="validatorPhone"
            placeholder="Enter phone number "
            :rules="[{ validator: validatorPhone, message: 'Please input the correct content' }]"
          />
        </div>
        <van-field
          v-model="sms"
          placeholder="Enter verification code"
          @focus="focus1"
          :class="{ 'field': active1, 'field1': isActive1 }"
        >
          <template #button>
            <button
              size="small"
              class="send-register"
              @click="sendCode()"
              :disabled="dis"
            >
              {{ content }}
            </button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block native-type="submit" class="submit"
            >Login</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import http from '../api/index.js';
export default {
  data() {
    return {
      active: 2,
      phone: '',
      active1: true,
      // actives:0,
      isActive1: false,
      active: true,
      // actives:0,
      isActive: false,
      sms: '',
      value: '',
      values: '86',
      options: [
        { text: '+86 🇨🇳', value: '86' },
        { text: '+61 🇦🇺', value: '61' },
      ],
      //记录具体倒计时时间
      totalTime: 60,
      content: 'Get  verification code',
      canClick: true,
      dis: false,
    };
  },
  mounted() {},
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validatorPhone(val) {
      return /^1[0-9]{10}$/.test(val);
    },
    // 输入手机号时获取焦点时变化颜色
    focus(){
      this.active=false;
      this.isActive=true;
      this.active1=true;
      this.isActive1=false;
    },
    // 输入验证码时
    focus1(){
      this.active1=false;
      this.isActive1=true;
      this.active=true;
      this.isActive=false;
    },
    // 登录
    onSubmit() {
      // console.log('aaa');
      // console.log(this.phone);
      console.log('aaaaaaa:', this.sms);
      http
        .userLogin({
          phone: this.values + this.phone,
          verify_code_key: localStorage.getItem('userCard'),
          verify_code: this.sms,
        })
        .then((res) => {
          // console.log('res=>', res.data);
          let token = res.data.access_token;
          localStorage.setItem('token', token); //存token
          if (res.status === 200) {
            this.$router.push({
              name: 'home',
            });
          }
        })
        .catch((r) => {
          console.log('错误》》', r);
        });
    },
    // 发送验证码
    sendCode() {
      // console.log('fas');
      if (!this.canClick) return; //改动的是这两行代码
      this.canClick = false;
      this.dis = true;
      this.content = this.totalTime + 's' + 'Resend after';
      console.log('aaaa', this.values + this.phone);
      http
        .userCode({
          phone: this.values + this.phone,
        })
        .then((r) => {
          console.log('ssss,', r);
          localStorage.setItem('userCard', r.data.verify_code_key);
        })
        .catch((res) => {
          console.log('错误。。。', res);
        });
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + 's' + 'Resend after';
        if (this.totalTime < 0) {
          this.dis = false;
          window.clearInterval(clock);
          this.content = 'Resend captcha';
          this.totalTime = 60;
          this.canClick = true; //这里重新开启
        }
      }, 1000);
    },
    // 微信登录
    wxLogin() {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
    },
    // 取消登录
    cancelLogin() {
      this.phone = '';
      this.sms = '';
    },
  },
};
</script>
<style scoped>
/* 空得div */
.content {
  height: 10rem;
}
.logo {
  width: 37.5rem;
  margin: 0 auto;
}
.logo-img {
  width: 6.5rem;
  height: 6.9rem;
  margin-left: 15.5rem;
}
.logo-fond {
  color: #ff9f08;
  font-family: Noto Sans S Chinese;
  font-style: normal;
  font-weight: bold;
  margin-top: 0;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
}
/* 输入手机号 */
.phone {
  display: flex;
  align-items: center;
  border-bottom: 0.2rem solid #e2e7e7;
}
.phone1 {
  display: flex;
  align-items: center;
  border-bottom: 0.2rem solid #e25b28;
}
/* 下拉框 */
.selects {
  width: 10rem;
  height: 2rem;
  margin-left: 2rem;
  border: 0;
  background-color: white;
}

.select-chinese {
  display: flex;
}
/* 注册整个样式 */
.register {
  width: 32rem;
  margin: 0 auto;
}
.van-form {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* border: 0.3rem solid red; */
  border-radius: 0.5rem;
  height: 25rem;
  margin-top: 3rem;
}
.field {
  border-bottom: 0.2rem solid #e2e7e7;
}
.field1 {
  border-bottom: 0.2rem solid #e25b28;
}
/* 发送验证码按钮 */
.send-register {
  border: 0.1rem solid #e25b28;
  background-color: white;
  border-radius: 1.4rem;
  color: #e25b28;
  font-family: Noto Sans S Chinese;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}
/* 登录注册按钮 */
.submit {
  background: linear-gradient(90.39deg, #e25b28 1.67%, #f3b143 97.95%);
  color: white;
}
.login {
  display: flex;
  width: 25rem;
  margin-left: 2.5rem;
  justify-content: space-between;
  font-family: Noto Sans S Chinese;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 27px;
  /* text-align: center; */
  color: #ffffff;
}
</style>